<!DOCTYPE html>
<html lang="sh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>别碰红块</title>
    <!-- <script crossorigin="anonymous"
        integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g=="
        src="https://lib.baomitu.com/jquery/3.6.0/jquery.js"></script> -->
        <script src="./jquery-3.6.0.min.js"></script>
    <style>
        #cube {
            height: 50px;
            width: 50px;
            background-color: rgba(252, 8,8);
            position: absolute;
        }

        

        #tubeout1{
            border: 1px solid rgb(0, 0, 0);
            height: 100px;
            width: 80px;
            background-color: rgb(47, 252, 6);
            position: absolute;
            left: 100px;
            bottom: 100px;
        }

        #tubeout2{
            border: 1px solid rgb(0, 0, 0);
            height: 50px;
            width: 100px;
            background-color: rgb(47, 252, 6);
            position: absolute;
            left: 90px;
            bottom: 150px;
        }

        #tubeoutB1{
            border: 1px solid rgb(0, 0, 0);
            height: 100px;
            width: 80px;
            background-color: rgb(47, 252, 6);
            position: absolute;
            left: 2100px;
            bottom: 100px;
        }

        #tubeoutB2{
            border: 1px solid rgb(0, 0, 0);
            height: 50px;
            width: 100px;
            background-color: rgb(47, 252, 6);
            position: absolute;
            left: 2090px;
            bottom: 150px;
        }

        #board {
            height: 150px;
            width: 50px;
            left: 900px;
            bottom: 100px;
            background-color: rgb(255, 196, 0);
            position: absolute;
        }

        #btn {
            height: 50px;
            width: 200px;
        }

        .red{
            background-color: rgb(252, 8, 8);
            height: 80px;
            width: 80px;
            position: absolute;
        }

        #redblock2{
            left: 200px;
            bottom: 100px;
        }
        #redblock1{
            left: 2100px;
            bottom: 100px;
        }

        .score_wrap {
            border: 2px solid rgb(142, 231, 253);
            border-radius: 8px;
            width: 200px;
            height: 60px;
            background: white;
            margin-top: 30px;
            margin-left: 1500px;
            display: flex;
        }
        
        .score_text,
        .score_calc {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .score_text {
            border-right: 2px solid rgb(142, 231, 253);
        }

        .lifenum {
            border: 2px solid rgb(252, 22, 22);
            border-radius: 8px;
            width: 200px;
            height: 60px;
            background: white;
            margin-top: 30px;
            margin-left: 200px;
            display: flex;
        }
        .word,
        .life {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .word {
            border-right: 2px solid rgb(252, 22, 22);
        }

        #massge{
            display: flex;
            flex-direction: row;
        }
        p{
            font-size:30px
        }

        #frame{
            width: 2200px;
            background-color: aquamarine;
            margin: auto;
        }

        #backpicture{
            background: url("./素质三连1.jpg");
            display: flex;
            /* flex-wrap: nowrap; */
            justify-content:center;
            width: 2200px;
            height: 500px;
            
        }

    </style>
</head>

<body>
    
        <audio id="eatPink" >
            <source src="./吃粉块.mp3" type="audio/mpeg">
        </audio>
        <audio id="bruise" >
            <source src="./受伤.mp3" type="audio/mpeg">
        </audio>
    
        <div id="frame">
            <div id='cube'></div>
            <div id='board'></div>
            
            <!-- <div id = 'gun'></div> -->
            <div id="massge">

                <div class="lifenum">
                <div class="word">生命:</div>
                <div class='life'>3</div>
            </div>


            <div class="score_wrap">
                <div class="score_text">存活时间</div>
                <div class="score_calc">0</div>
            </div>
            
            </div>
            <p>按A向左移动，按D向右移动，按w跳跃。控制长木块别碰红块。</p>
            <p>浏览器可能会导致游戏缩放不正确，请Ctrl+滚轮调节。下面是素质三连</p>
            
            <div id='tubeout1'></div>
            <div id='tubeout2'></div>
            <div id='tubeoutB1'></div>
            <div id='tubeoutB2'></div>
            <div id='redblock1' class="red"></div>
            <div id='redblock2' class="red"></div>
            
        </div>

        <div id="backpicture"></div>
    <script>

        var $bp=document.querySelector('#backpicture');
      


        alert("Are you ready");
        var x = 100;
        var xv = 10;
        
        var y = 100;
        var yv = 10;
        var oldy = 100;
        var a = 0.1

        var rb1_x=200
        var rb2_x=2100
      

        var rb1_xv=5
        var rb2_xv=-5

        var fk = document.querySelector('#cube');

        var rb1 = document.querySelector('#redblock1');
        var rb2 = document.querySelector('#redblock2');


        var backgroundcount=0;
        
        var randomnum=1;
        var redblocklowspeed=6;
        var lifeflag = setInterval(function () {
            x += xv;
            yv = yv - a;
            y = y + yv;

            fk.style.left = x + 'px';
            fk.style.bottom = y + 'px';

            

            // 抛掷物的运动情况
            if (y < oldy) {
                yv = 10;
                // xv = xnew;
                randomnum=Math.floor((Math.random() * 100));
                if(randomnum>=80){
                    fk.style.backgroundColor='pink';
                }else if(randomnum<80){
                    fk.style.backgroundColor=' rgb(252, 8, 8)';
                }

                xv= Math.floor((Math.random() * 10) + 1);
                x=100
                y=100
            }

            // 两个红块的运动情况
            rb1_x+=rb1_xv;
            rb1.style.left=rb1_x+'px';

            
            
            if(initTime%10==0){
                redblocklowspeed+=0.032;

            }

            if(rb1_x>=2100){
                rb1_xv=-Math.floor((Math.random() * 8) + redblocklowspeed);
            }else if(rb1_x <200){
                rb1_xv=Math.floor((Math.random() * 8) + redblocklowspeed);
            }
            rb2_x+=rb2_xv;
            rb2.style.left=rb2_x+'px';
            if(rb2_x>=2100){
                rb2_xv=-Math.floor((Math.random() * 8) + redblocklowspeed);
            }else if(rb2_x <200){
                rb2_xv=Math.floor((Math.random() * 8) + redblocklowspeed);
            }
            // alert("111")
            backgroundcount++;
            if(backgroundcount%500==1){
                var opt=Math.floor((Math.random() * 4) )
                if(opt==1){
                    $bp.style.backgroundImage = "url(./素质三连1.jpg)";
                }else if(opt==2){
                    $bp.style.backgroundImage = "url(./素质三连2.png)";
                }else if(opt==3){
                    $bp.style.backgroundImage = "url(./素质三连3.jpg)";
                }else{
                    $bp.style.backgroundImage = "url(./素质三连4.jpg)";
                }
            }
        }, 16.7);


        var board = document.querySelector('#board');
        console.log(board);
        var bo_x=900;
        var bo_y=100;


        var boardflagleft = false;  
        var boardflagright = false;
        $(document).keydown(function (event) {
            if (event.keyCode == 65) {
                boardflagleft = true;

                boardflagright = false;
            }
        });
        $(document).keyup(function (event) {
            if (event.keyCode == 65) {
             
                boardflagleft = false;
            }
        });


        $(document).keydown(function (event) {
            if (event.keyCode == 68) {
                boardflagright = true;

                boardflagleft = false;  
            }
        });
        $(document).keyup(function (event) {
            if (event.keyCode == 68) {
                boardflagright = false;
            }
        });
        
        var bo_yv=0;
        var upflag=false;
        $(document).keydown(function (event) {
            if (event.keyCode == 87) {
                // alert("wwww")

                if( bo_y<=100){
                    bo_yv=8;
                    upflag=true;
                    // alert(upflag)
                }
                
            }
        });


        // 控制主角的运动
        var boardControl = setInterval(function () {
            if(upflag==true){
                bo_yv-=0.1;
                bo_y+=bo_yv;
                board.style.bottom=bo_y+'px';
                console.log(bo_y)
                if(bo_y<=100){
                    upflag=false;
                    bo_y=100;                //修正主角水平位置
                }
            }


           if(boardflagleft==true){
                if(bo_x>=200){
                    bo_x=bo_x-10;
                    board.style.left=bo_x+'px'; 
                }
           }else if(boardflagright==true){
                
                if(bo_x<=2000){
                    bo_x=bo_x+10;
                    board.style.left=bo_x+'px';
                }    
           }


        }, 16.7);

        // //碰撞检测
        var eatPink=document.getElementById("eatPink");
        
        var bruise=document.getElementById("bruise");

        var $life = document.querySelector(".life");
        var initlife = $life.innerHTML;
        var chilldownflag=false;
        let count=0;
        var collide = setInterval(function () {
            if(chilldownflag==false){


                //红方块1号碰撞检测
                if(
                Math.abs((bo_x+25) - (rb1_x+40)) < (50/2 + 80/2) //横向判断
                &&
                Math.abs((bo_y+75) - (100+40)) < (150/2 + 80/2) //纵向判断
                ){
                    bruise.play();
                    initlife -= 1;
                    $life.innerHTML=initlife;
                    chilldownflag=true;
                    board.style.backgroundColor='rgba(156, 156, 156, 0.952)';
                }

                //红方块2号碰撞检测
                if(
                Math.abs((bo_x+25) - (rb2_x+40)) < (50/2 + 80/2) //横向判断
                &&
                Math.abs((bo_y+75) - (100+40)) < (150/2 + 80/2) //纵向判断
                ){
                    bruise.play();
                    initlife -= 1;
                    $life.innerHTML=initlife;
                    chilldownflag=true;
                    board.style.backgroundColor='rgba(156, 156, 156, 0.952)';
                }

                //抛掷物碰撞检测
                if(
                Math.abs((bo_x+25) - (x+25)) < (50/2 + 50/2) //横向判断
                &&
                Math.abs((bo_y+75) - (y+25)) < (150/2 + 50/2) //纵向判断
                ){
                    if(randomnum>=80){
                        eatPink.play();  //播放音乐
                        initlife = parseInt(initlife) + 1;
                        $life.innerHTML=initlife;
                    }else{
                        bruise.play();
                        initlife -= 2;
                        $life.innerHTML=initlife;
                        chilldownflag=true;
                        board.style.backgroundColor='rgba(156, 156, 156, 0.952)';
                        
                    }
                    

                    yv = 10;
                    // xv = xnew;
                    randomnum=Math.floor((Math.random() * 100));
                    if(randomnum>=80){
                        fk.style.backgroundColor='pink';
                    }else if(randomnum<80){
                        fk.style.backgroundColor=' rgb(252, 8, 8)';
                    }

                    xv= Math.floor((Math.random() * 10) + 1);
                    x=100
                    y=100
                    
                }

            }else{
                count++;
                if(count>=100){
                    count=0;
                    chilldownflag=false;
                    board.style.backgroundColor='rgb(255, 196, 0)';

                }
            }

            if(initlife<=0){
                // alert("你挂了");

                
                
                alert("你挂了,你存活了"+initTime +"秒");



                window.location.reload(true);
                
                console.log("aaaa");

                initlife =3


                
            }
        }, 16.7);

      

    // 计时器
        var $time = document.querySelector(".score_calc");
        
        var initTime =$time.innerHTML;
        // console.log(initTime)
        var timer = setInterval(function() {
            // if (initTime === 0) {
            //     clearInterval(timer);
            //     return;
            // }
            initTime = parseInt(initTime) + 1;
            $time.innerHTML = initTime;
        }, 1000);
    </script>
</body>

</html>